<template>
    <div>
        <ul>
            <li v-for="m in message" :key="m.id">
                <router-link replace
                 :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    消息{{m.id}}
                </router-link>
                <!-- 编程式路由导航 -->
                <!-- 编程式路由导航其实可以理解为不通过router-link标签实现的路由跳转 -->
                <!-- 1. 创建两个btn，功能分别是push方式的路由跳转和replace方式的路由跳转 -->
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">replace查看</button>
                &nbsp;&nbsp;
            </li>
        </ul>
        <br>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name:'Message',
    data(){
        return {
            message:[
                {id:"001",title:'消息1标题'},
                {id:"002",title:'消息2标题'},
                {id:"003",title:'消息3标题'},
            ]
        }
    },
    methods: {
        // 2.在methods中通过$router来操作路由的跳转
        pushShow(m){
            console.log("pushShow执行了");
            // 通过$router.push 来实现历史模式为push的路由跳转，参数是一个对象，和router-link的to属性的参数一致
            this.$router.push({
                path:'/home/message/detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }).catch(err=>console.log(err.message))
        },
        replaceShow(m){
            console.log("replaceShow执行了");
            this.$router.replace({
                name:'detail',
                query:{
                    id:m.id,
                    title:m.title
                }
            }).catch(err=>console.log(err.message))
        }
    },
    beforeDestroy() {
        console.log('Message组件被销毁了')
    },
}
</script>

<style>

</style>